import React, { FC } from "react";
import classnames from "classnames";
import {
  Dateleft,
  Dateright,
  Datedoubleleft,
  Datedoubleright,
} from "@ct0/icons";
import generateConfig from "./generateConfig";
import { DayType } from "../type";
import { monthChangeDiff, prefixCls, yearChangeDiff } from "../constant";
import { enMonthMapping } from "../utils";

interface Props {
  viewDate: DayType;
  setViewDate: (newDate: DayType) => void;
  isChinese?: boolean;
}

const DateTimeRangeHeader: FC<Props> = ({
  viewDate,
  setViewDate,
  isChinese = true,
}) => {
  const onYearChange = (diff: number) => {
    const newDate = generateConfig.addYear(viewDate, diff);
    setViewDate(newDate);
  };
  const onMonthChange = (diff: number) => {
    const newDate = generateConfig.addMonth(viewDate, diff);
    setViewDate(newDate);
  };
  const iconComponent = (component: React.ReactNode, onChange: () => void) => {
    return (
      <span onClick={onChange} role="narrow">
        {component}
      </span>
    );
  };
  const getDateString = (viewDate: DayType) => {
    const year = generateConfig.getYear(viewDate);
    const month = generateConfig.getMonth(viewDate);
    const displayMonth = month + 1;
    if (isChinese) {
      return `${year}年${displayMonth}月`;
    }
    return `${enMonthMapping.get(displayMonth)}  ${year}`;
  };
  const curPrefixCls = `${prefixCls}-header`;
  return (
    <div className={`${curPrefixCls}`}>
      <div
        className={classnames(
          `${curPrefixCls}-operation`,
          `${curPrefixCls}-operation-left`
        )}
      >
        {iconComponent(<Datedoubleleft />, () => onYearChange(-yearChangeDiff))}
        {iconComponent(<Dateleft />, () => onMonthChange(-monthChangeDiff))}
      </div>
      <span role="current">{getDateString(viewDate)}</span>
      <span role="next">
        {getDateString(generateConfig.addMonth(viewDate, 1))}
      </span>
      <div
        className={classnames(
          `${curPrefixCls}-operation`,
          `${curPrefixCls}-operation-right`
        )}
      >
        {iconComponent(<Dateright />, () => onMonthChange(monthChangeDiff))}
        {iconComponent(<Datedoubleright />, () => onYearChange(yearChangeDiff))}
      </div>
    </div>
  );
};

export default DateTimeRangeHeader;
